<template>
  <formDialog
    :dialogFormVisible="dialogFormVisible"
    :height="90"
    @close="
      (event) => {
        $emit('setDialog', event);
      }
    "
    :title="title"
  >
    <template #form>
      <scroll>
        <el-form
          label-position="top"
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <div class="formBox mb-20">
            <el-row :gutter="20" justify="space-between" type="flex">
              <el-col :span="12">
                <el-form-item label="所属学院" prop="facultyNo">
                  <selectName
                    :selectArr="facultyOptions"
                    :keys="'facultyNo'"
                    :valueKey="'facultyNo'"
                    :label="'facultyName'"
                    :title="false"
                    :placeholder="'请选择所属学院'"
                    :value="ruleForm.facultyNo"
                    @dropDown="(val) => (ruleForm.facultyNo = val)"
                  >
                  </selectName>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="实验室名称" prop="laboratoryName">
                  <el-input
                    v-model="ruleForm.laboratoryName"
                    size="mini"
                    :placeholder="'请输入实验室名称'"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20" justify="space-between" type="flex">
              <el-col :span="12">
                <el-form-item label="点位编号" prop="pointNo">
                  <el-input
                    v-model="ruleForm.pointNo"
                    size="mini"
                    :placeholder="'请输入点位编号'"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="楼层编号" prop="floorNo">
                  <el-input
                    v-model="ruleForm.floorNo"
                    size="mini"
                    :placeholder="'请输入楼层编号'"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20" justify="space-between" type="flex">
              <el-col :span="12">
                <el-form-item label="实验室编号" prop="laboratoryNo">
                  <el-input
                    v-model="ruleForm.laboratoryNo"
                    size="mini"
                    :placeholder="'请输入实验室编号'"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="负责人" prop="contact">
                  <el-input
                    v-model="ruleForm.contact"
                    size="mini"
                    :placeholder="'请输入负责人'"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20" justify="space-between" type="flex">
              <el-col :span="12">
                <el-form-item label="联系方式" prop="contactWay">
                  <el-input
                    v-model="ruleForm.contactWay"
                    size="mini"
                    :placeholder="'请输入联系方式'"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-form>
      </scroll>
    </template>
    <template #bottom>
      <div class="bottom">
        <div class="more" @click="submitform('ruleForm')">提交</div>
      </div>
    </template>
  </formDialog>
</template>

<script>
import { baseLaboratoryadd } from "@/http/api";
export default {
  props: ["dialogFormVisible", "title", "facultyOptions", "userInfoDetail"],
  data() {
    var validatePHone = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入手机号"));
      } else {
        if (this.ruleForm.contactWay.length !== 11) {
          callback(new Error("请输入正确的手机格式"));
        }
        callback();
      }
    };
    return {
      ruleForm: {
        facultyNo: "", //学院名称
        laboratoryName: "", //实验室名称
        laboratoryNo: "", //实验室编号
        contact: "", //联系人
        contactWay: "", //手机号
        pointNo: "", //点位编号
        floorNo: "", //楼层编号
      },

      rules: {
        facultyNo: [
          {
            required: true,
            message: "请选择实验室所属学院",
            trigger: "change",
          },
        ],
        pointNo: [
          { required: true, message: "请填写点位编号", trigger: "blur" },
        ],
        floorNo: [
          { required: true, message: "请填写楼层编号", trigger: "blur" },
        ],
        laboratoryName: [
          { required: true, message: "请填写实验室名称", trigger: "blur" },
        ],
        laboratoryNo: [
          { required: true, message: "请填写实验室编号", trigger: "blur" },
        ],
        contact: [{ required: true, message: "请输入联系人", trigger: "blur" }],
        contactWay: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur",
          },
          { validator: validatePHone, trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    /* 确定按钮 */
    submitform(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let params = {
            collegeNo: this.userInfoDetail.collegeNo,
          };
          Object.assign(this.ruleForm,params);
          let res = await baseLaboratoryadd(this.ruleForm);
          if (res.code === 20000) {
            this.$emit("setDialog", false);
            this.$refs[formName].resetFields();
            this.$parent.initData(this.$parent.commonIndex);
            this.$notify({
              message: res.message,
              duration: 1000,
            });
          }
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style>
</style>